<template>
  <div id="container">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
  export default {
    components: {
      chartTitle
    },
    name: 'chart-line',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      color: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
        }
      },
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      id: function() {
        return `main-${Math.random()}`
      },
      chartData: function() {
        let obj = {
          legendData: [],
          xAxisData: [],
          seriesData: []
        }
        for (let key in this.data) {
          // 先填legend
          obj.legendData.push(key)
          // 处理类目数据 
          let seriesObj = {
            name: key,
            type: 'line',
            symbol: 'circle',
            data: []
          }
          // 处理X轴
          this.data[key].map(item => {
            obj.xAxisData.push(item.name)
            seriesObj.data.push(item.value)
          })
          obj.xAxisData = Array.from(new Set(obj.xAxisData))
          obj.seriesData.push(seriesObj)

        }
        return obj
      }
    },
    mounted() {
      setTimeout(() => {
        this.onInit()
      }, 3500)
    },
    updated() {
      setTimeout(() => {
        this.onInit()
      }, 1000)
    },
    methods: {
      onInit() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
          tooltip: {
            trigger: 'axis'
          },
          color: this.color,
          legend: {
            right: 22,
            top: 19,
            data: this.chartData.legendData,
            textStyle: {
              fontSize: autoSize(14),
              color: '#fff'
            },
            icon: 'line',
            lineStyle: {
              type: 'solid',
            },
            itemWidth: 10,
          },
          grid: {
            left: 18,
            right: 21,
            bottom: 21,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            // boundaryGap: ['50%', '50%'],
            data: this.chartData.xAxisData,
            axisLabel: {
              color: '#fff'
            },
            axisLine: {
              lineStyle: {
                color: '#306269'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(48, 98, 105, .2)'
              }
            }
          },
          series: this.chartData.seriesData
        };

        option && myChart.setOption(option, true);
        window.addEventListener('resize', () => {
          this.$nextTick(() => {
            myChart.resize()
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }
 
  #container {
    width: 100%;
    height: 27.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main {
      flex: 1;
    }
  }
</style>
